
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Crystal Sky Web Service Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" />

<meta name="description" content="Dropdown menus" />

<link type="text/css" href="html/default.css" media="screen" rel="stylesheet" />

<script type="text/javascript" src="html/jquery.js"></script>
<script type="text/javascript" src="html/jquery-ui.js"></script>
<script type="text/javascript" src="html/jquery.dataTables.js"></script>
<style type="text/css">
	div.ui-datepicker{
	 font-size:10px;
	}
</style>

<script>

$(document).ready(function() {



	$(".image_paging").show();

	$(".image_paging a:first").addClass("active");



	//Get size of the image, how many images there are, then determin the size of the image reel.

	var imageWidth = $(".image_window").width();

	var imageSum = $(".image_reel img").size();

	var imageReelWidth = imageWidth * imageSum;



	//Adjust the image reel to its new size

	$(".image_reel").css({'width' : imageReelWidth});



	//Paging  and Slider Function

	rotate = function(){

		var triggerID = $active.attr("rel") - 1; //Get number of times to slide

		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide



		$(".image_paging a").removeClass('active'); //Remove all active class

		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)



		//Slider Animation

		$(".image_reel").animate({

			left: -image_reelPosition

		}, 500 );



	}; 



	//Rotation  and Timing Event

	rotateSwitch = function(){

		play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds

			$active = $('.image_paging a.active').next(); //Move to the next paging

			if ( $active.length === 0) { //If paging reaches the end...

				$active = $('.image_paging a:first'); //go back to first

			}

			rotate(); //Trigger the paging and slider function

		}, 7000); //Timer speed in milliseconds (7 seconds)

	};



	rotateSwitch(); //Run function on launch


});

</script>

	<script>
	
	$(function() {
		 $('#example').dataTable({
					"bJQueryUI": true,
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "/hcj/jsonp",
					"fnServerData": function( sUrl, aoData, fnCallback ) {
						$.ajax( {
							"url": sUrl,
							"data": aoData,
							"success": fnCallback,
							"dataType": "jsonp",
							"cache": false
						} );
					}
				});
	
		$('form').submit(function(event) {
			//event.preventDefault(); 
			$.ajax({
				   type: "POST",
				   url: "/hcj/SaveUser",
				   data: $(this).serialize()
				 });
	
			$('#example').dataTable({
					"bJQueryUI": true,
					"bDestroy": true,
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "/hcj/jsonp",
					"fnServerData": function( sUrl, aoData, fnCallback ) {
						$.ajax( {
							"url": sUrl,
							"data": aoData,
							"success": fnCallback,
							"dataType": "jsonp",
							"cache": false
						} );
					}
				});
				 
			return false;
		  });
		  
		$( "#datepicker" ).datepicker({
			numberOfMonths: 3,
			showButtonPanel: true,
			defaultDate: '-1m',
			dateFormat: 'yy-mm-dd'
		});
		
		$( "input:submit").button();
		
		$( "#city" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "http://ws.geonames.org/searchJSON",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data.geonames, function( item ) {
							return {
								value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
							}
						}));
					}
				});
			},
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	</script>

</head>

<body>



<h1>Crystal Sky Web Service Demo</h1>



<ul id="nav" class="dropdown dropdown-horizontal">

	<li><a href="./HCJ.html">Home</a></li>

	<li class="dir" >About Us

		<ul>

			<li><a href="./HCJ.html">History</a></li>

			<li><a href="./HCJ.html">Our Vision</a></li>

			<li class="dir">The Team

				<ul>

					<li><a href="./HCJ.html">Ken</a></li>

					<li><a href="./HCJ.html">Jacky</a></li>

					<li><a href="./HCJ.html">Leon</a></li>

				</ul>

			</li>

			<li><a href="./HCJ.html">Clients</a></li>

			<li><a href="./HCJ.html">Testimonials</a></li>

			<li><a href="./HCJ.html">Press</a></li>

			<li><a href="./HCJ.html">FAQs</a></li>

		</ul>

	</li>

	<li class="dir">Services

		<ul>

			<li><a href="./HCJ.html">Product Development</a></li>

			<li><a href="./HCJ.html">Delivery</a></li>

			<li><a href="./HCJ.html">Shop Online</a></li>

			<li><a href="./HCJ.html">Support</a></li>

			<li><a href="./HCJ.html">Training &amp; Consulting</a></li>

		</ul>

	</li>

	<li class="dir">Products

		<ul>

			<li><a href="./HCJ.html" class="dir">New</a>

				<ul>

					<li><a href="./HCJ.html">Corporate Use</a></li>

					<li><a href="./HCJ.html">Private Use</a></li>

				</ul>

			</li>

			<li><a href="./HCJ.html" class="dir">Used</a>

				<ul>

					<li><a href="./HCJ.html">Corporate Use</a></li>

					<li><a href="./HCJ.html">Private Use</a></li>

				</ul>

			</li>

			<li><a href="./HCJ.html">Featured</a></li>

			<li><a href="./HCJ.html">Top Rated</a></li>

			<li><a href="./HCJ.html">Prices</a></li>

		</ul>

	</li>

	<li><a href="" style="text-decoration:blink; color: #FF0000;">Gallery</a></li>

	<li><a href="" style="text-decoration:blink; color: #FF0000;">Add User</a></li>

	<li><a href="./HCJ.html">Careers</a></li>

	<li><a href="./HCJ.html" class="dir">Contact Us</a>

		<ul>

			<li><a href="./HCJ.html">Enquiry Form</a></li>

			<li><a href="./HCJ.html">Map &amp; Driving Directions</a></li>

			<li><a href="./HCJ.html">Your Feedback</a></li>

		</ul>

	</li>

</ul>

<div class ="form_input" >
  <form>
	<div><label for="firstname">First Name: </label>
	<input type="text" name="FirstName" value="firstname" id="a" /></div>
	<div><label for="firstname">Last Name: </label>
	<input type="text" name="LastName" value="lastname" id="a" /></div>
 	<div><label for="date">Date: </label>
	<input type="text" id="datepicker" name="Date"></div>
	<div><label for="city">City: </label>
	<input id="city" name="City" style="width: 200px;"/></div>
	<input type="submit" value="Add new user">
  </form>
</div>

<div style="padding:10px 50px 75px; float: left; position: relative; width:418px;">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width:418px;">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>City</th>
			<th>Date</th>
		</tr>
	</thead>
	<tbody>

	</tbody>
</table>
</div>

<div class="image_sliders" style="display: ;">

    <div class="image_window">

        <div class="image_reel">

            <a href="#"><img src="html/images/gallery1.jpg" alt="" height="500" width="700" /></a>

            <a href="#"><img src="html/images/gallery2.jpg" alt="" height="500" width="700" /></a>

            <a href="#"><img src="html/images/gallery3.jpg" alt="" height="500" width="700" /></a>

            <a href="#"><img src="html/images/gallery4.jpg" alt="" height="500" width="700" /></a>

        </div>

		<div class="image_paging">

			<a href="#" rel="1">1</a>

			<a href="#" rel="2">2</a>

			<a href="#" rel="3">3</a>

			<a href="#" rel="4">4</a>

		</div>

    </div>

</div>

</body>

</html>